import React from 'react';
import './login.css';
import logo from '../../logo.svg';
class Login extends React.Component{
    constructor(props){
        super(props);
        
        console.log(props);
        console.log(this);
        this.state={
            titleTtxt:'我是pacino',
            name:'',
            psd:'',
            changeTitle:false
        }
        this.handleClick=this.handleClick.bind(this);
        this.getPsdData=this.getPsdData.bind(this); 
        this.getUserNameData=this.getUserNameData.bind(this);
    }
    componentWillUpdate(){
        console.log(1);
    }
    componentDidMount(){
        console.log(2)
    }
    componentWillUnmount(){
        console.log(3)
    }
    render(){
        let title;
        if(this.state.changeTitle){
            title=<div className="loginTitle">我是pacino</div>
        }
        else{
            title=<div className="loginTitle">我是白兰度</div>
        }
        return <div className="login-box">
                    <img src={logo} alt={logo}/>
                    {title}
                   
                    <div className="username">
                     <input type="text" placeholder="请输入用户名" value={this.state.name} onChange={this.getUserNameData}/>
                    </div>
                    <div className="password">
                        <input type="password" placeholder="请输入密码" value={this.state.psd} onChange={this.getPsdData}/>
                    </div>
                    <div className="btn">
                        <input type="button" value="登录" onClick={this.handleClick}/>
                    </div>
                    
                </div>
        
    }
    handleClick(){
        this.setState({changeTitle:!this.state.changeTitle});
        event.preventDefault();
        
    }
    getPsdData(event){
        this.setState({psd:event.target.value});
    }
    getUserNameData(event){       
        this.setState({name:event.target.value});
    }

}
export default Login;